<!DOCTYPE html>
<html class="spectrum spectrum--medium spectrum--light" lang="en">
<head>
    <meta charset="UTF-8">

    <!-- Include the support to Grid of Bootstrap 4.5 -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-grid.css">

    <!-- Include global variables first -->
    <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-global.css">

    <!-- Include only the scales your application needs -->
    <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-medium.css">

    <!-- Include only the colorstops your application needs -->
    <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-light.css">

    <!-- Include index-vars.css for all components you need -->
    <link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
    <link rel="stylesheet" href="node_modules/@spectrum-css/typography/dist/index-vars.css">
    <link rel="stylesheet" href="node_modules/@spectrum-css/icon/dist/index-vars.css">
    <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
    <link rel="stylesheet" href="node_modules/@spectrum-css/fieldlabel/dist/index-vars.css">
    <link rel="stylesheet" href="node_modules/@spectrum-css/fieldgroup/dist/index-vars.css">
    <link rel="stylesheet" href="node_modules/@spectrum-css/card/dist/index-vars.css">

    <title>Lineas Telefonicas</title>


    <script src="node_modules/loadicons/index.js"></script>
    <script>
        // Both medium and large icons for responsive UIs that support both
        // .spectrum--medium and .spectrum--large
        loadIcons('node_modules/@spectrum-css/icon/dist/spectrum-css-icons.svg');
        // These icons are released within the @adobe/spectrum-css-workflow-icons package.
        loadIcons('node_modules/@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg');
    </script>
</head>
<body class="container-fluid">

<div class="col-6 mx-auto mt-5">
    <div class="row row-cols-3">

        <div class="col spectrum-Card">

            <div class="spectrum-Card-body">

                <h4 class="spectrum-Heading--subtitle3">Linea 1</h4>
                <hr class="spectrum-Rule spectrum-Rule--small">

                <div class="offset-3 col-6 mb-3">
                    <svg class="spectrum-Icon" height="125px" width="100px">
                        <use xlink:href="#spectrum-icon-24-DevicePhone"/>
                    </svg>
                </div>

                <div class="col-12">
                    <label class="spectrum-FieldLabel spectrum-FieldLabel--left">Number of Calls: </label>
                    <label class="spectrum-FieldLabel spectrum-FieldLabel--right ml-1">0</label>
                </div>

                <div class="col-12 mb-3">
                    <label class="spectrum-FieldLabel spectrum-FieldLabel--left">Number of Minutes: </label>
                    <label class="spectrum-FieldLabel spectrum-FieldLabel--right ml-1">0</label>
                </div>

                <button class="col-12 spectrum-Button spectrum-Button--primary spectrum-Button--quiet">
                    <span class="spectrum-Button-label">Add Call</span>
                </button>
            </div>

        </div>

        <div class="col spectrum-Card">

            <div class="spectrum-Card-body">

                <h4 class="spectrum-Heading--subtitle3">Linea 2</h4>
                <hr class="spectrum-Rule spectrum-Rule--small">

                <div class="offset-3 col-6 mb-3">
                    <svg class="spectrum-Icon" height="125px" width="100px">
                        <use xlink:href="#spectrum-icon-24-DevicePhone"/>
                    </svg>
                </div>

                <div class="col-12">
                    <label class="spectrum-FieldLabel spectrum-FieldLabel--left">Number of Calls: </label>
                    <label class="spectrum-FieldLabel spectrum-FieldLabel--right ml-1">0</label>
                </div>

                <div class="col-12 mb-3">
                    <label class="spectrum-FieldLabel spectrum-FieldLabel--left">Number of Minutes: </label>
                    <label class="spectrum-FieldLabel spectrum-FieldLabel--right ml-1">0</label>
                </div>

                <button class="col-12 spectrum-Button spectrum-Button--primary spectrum-Button--quiet">
                    <span class="spectrum-Button-label">Add Call</span>
                </button>
            </div>

        </div>

        <div class="col spectrum-Card">

            <div class="spectrum-Card-body">

                <h4 class="spectrum-Heading--subtitle3">Linea 3</h4>
                <hr class="spectrum-Rule spectrum-Rule--small">

                <div class="offset-3 col-6 mb-3">
                    <svg class="spectrum-Icon" height="125px" width="100px">
                        <use xlink:href="#spectrum-icon-24-DevicePhone"/>
                    </svg>
                </div>

                <div class="col-12">
                    <label class="spectrum-FieldLabel spectrum-FieldLabel--left">Number of Calls: </label>
                    <label class="spectrum-FieldLabel spectrum-FieldLabel--right ml-1">0</label>
                </div>

                <div class="col-12 mb-3">
                    <label class="spectrum-FieldLabel spectrum-FieldLabel--left">Number of Minutes: </label>
                    <label class="spectrum-FieldLabel spectrum-FieldLabel--right ml-1">0</label>
                </div>

                <button class="col-12 spectrum-Button spectrum-Button--primary spectrum-Button--quiet">
                    <span class="spectrum-Button-label">Add Call</span>
                </button>
            </div>

        </div>

    </div>

    <div class="row row-cols-1">

        <div class="col spectrum-Card">
            <div class="spectrum-Card-body p-1">
                <div class="spectrum-FieldGroup">
                    <label class="col-3 spectrum-FieldLabel">Total Cost:</label>
                    <label class="col-3 spectrum-FieldLabel">Total Number Calls:</label>
                    <label class="col-3 spectrum-FieldLabel">Total Minutes:</label>
                    <label class="col-3 spectrum-FieldLabel">Average Cost per Minute:</label>
                </div>
            </div>
        </div>

    </div>

    <div class="row row-cols-1">

        <div class="col spectrum-Card">

            <div class="row spectrum-Card-body p-1">

                <div class="col-4">
                    <button class="col-12 spectrum-Button spectrum-Button--primary spectrum-Button--quiet">
                        <span class="spectrum-Button-label">No, thanks</span>
                    </button>
                </div>

                <div class="col-4">
                    <button class="col-12 spectrum-Button spectrum-Button--primary spectrum-Button--quiet">
                        <span class="spectrum-Button-label">Remind me later</span>
                    </button>
                </div>

                <div class="col-4">
                    <button class="col-12 spectrum-Button spectrum-Button--primary spectrum-Button--quiet">
                        <span class="spectrum-Button-label">Rate now</span>
                    </button>
                </div>

            </div>

        </div>

    </div>
</div>

</body>
</html>